<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-create-user">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">创建帐户</h4>
            </div>
            <div class="modal-body">
                <form id="userForm-create" class="form-horizontal" role="form">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-account">帐号</label>
                                <div class="col-sm-8">
                                    <input id="create-account" type="text" class="form-control" name="account"
                                           autocomplete="off"
                                           placeholder="帐号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-name">姓名</label>
                                <div class="col-sm-8">
                                    <input id="create-name" type="text" class="form-control" name="name"
                                           autocomplete="off"
                                           placeholder="姓名">
                                </div>
                            </div>
<!--                            <div class="form-group">-->
<!--                                <label class="col-sm-4 control-label" for="create-tel">电话</label>-->
<!--                                <div class="col-sm-8">-->
<!--                                    <input id="create-tel" type="text" class="form-control" name="tel"-->
<!--                                           autocomplete="off"-->
<!--                                           placeholder="电话">-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-role">职位</label>
                                <div class="col-sm-8">
                                    <select id="create-role" class="form-control" name="role">
                                        <option value="1">生产人</option>
                                        <option value="2">质检员</option>
                                    </select>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-dept">部门</label>
                                <div class="col-sm-8">
                                    <input id="create-dept" type="text" class="form-control" name="dept" autocomplete="off"
                                           placeholder="请输入部门">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-branch">科室</label>
                                <div class="col-sm-8">
                                    <input id="create-branch" type="text" class="form-control" name="branch" autocomplete="off"
                                           placeholder="请输入科室">
                                </div>
                            </div>
                        </div>

<!--                        <div class="col-md-3">-->
<!--                            <div class="form-group">-->
<!--                                <label class="col-xs-4 control-label">所属部门</label>-->
<!--                                <div class="col-xs-8">-->
<!--                                    <div id="deptTree-create" class="ztree"></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-user"
                        shiro:haspermission="system:transuser:edit">
                    提交
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-edit-user">
    <div class="modal-dialog" style="width: 1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑帐户</h4>
            </div>
            <div class="modal-body" style="height: 210px;">
                <form id="userForm-edit" class="form-horizontal">
                    <input type="hidden" name="id">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-name">姓名</label>
                                <div class="col-sm-8">
                                    <input id="edit-name" type="text" class="form-control" name="name"
                                           autocomplete="off"
                                           placeholder="请输入姓名">
                                </div>
                            </div>
                            <!--                            <div class="form-group">-->
                            <!--                                <label class="col-sm-4 control-label" for="edit-tel">电话</label>-->
                            <!--                                <div class="col-sm-8">-->
                            <!--                                    <input id="edit-tel" type="text" class="form-control" name="tel" autocomplete="off"-->
                            <!--                                           placeholder="电话">-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-role">职位</label>
                                <div class="col-sm-8">
                                    <select id="edit-role" class="form-control" name="role">
                                        <option value="1">生产人</option>
                                        <option value="2">质检员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-dept">部门</label>
                                <div class="col-sm-8">
                                    <input id="edit-dept" type="text" class="form-control" name="dept" autocomplete="off"
                                           placeholder="请输入部门">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-branch">科室</label>
                                <div class="col-sm-8">
                                    <input id="edit-branch" type="text" class="form-control" name="branch" autocomplete="off"
                                           placeholder="请输入科室">
                                </div>
                            </div>
                        </div>
                        <!--                        <div class="col-md-3">-->
                        <!--                            <div class="form-group">-->
                        <!--                                <label class="col-sm-4 control-label">所属部门</label>-->
                        <!--                                <div class="col-sm-8">-->
                        <!--                                    <div id="deptTree-edit" class="ztree"></div>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" shiro:haspermission="system:transuser:edit" class="btn btn-info"
                        id="btn-edit-user">
                    提交
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>转序系统用户列表</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label for="query-account">帐号</label>
                                    <input id="query-account" type="text" name="account" class="form-control"
                                           placeholder="请输入帐号或者姓名">
                                </div>
                                <div class="form-group">
                                    <label for="query-role">职位</label>
                                    <select id="query-role" name="role" class="form-control">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1">生产</option>
                                        <option value="2">质检</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="query-status">状态</label>
                                    <select id="query-status" name="status" class="form-control">
                                        <option value="1" selected="selected">正常</option>
                                        <option value="0">锁定</option>
                                        <option value="">全部</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search"
                                        onclick="js.table.search(table);">
                                    <span class="Bold">搜索</span>
                                </button>
                                <a href="javascript:void(0);" shiro:haspermission="system:transuser:edit"
                                   class="btn btn-info pull-right" onclick="openCreateUserModal()">
                                    <span class="Bold">添加</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table;
    let roleTree, deptTree;

    /** 修改用户状态 */
    function lockUser(id, status) {
        js.post({
            url: ctx + "sys/transuser/update",
            data: {
                id: id,
                status: status
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /** 重置密码 */
    function resetPassword(id) {
        js.post({
            url: ctx + "sys/transuser/reset",
            data: {
                id: id
            }
        });
    }

    /** * 创建用户模态框 */
    function openCreateUserModal() {
        // deptTree = js.tree.init({
        //     id: "deptTree-create",
        //     expandAll: true,
        //     async: {
        //         url: ctx + "sys/transuser/depts"
        //     },
        //     check: {
        //         chkStyle: 'radio',
        //         radioType: "all"
        //     },
        //     data: {
        //         key: {
        //             name: "name"                                                   // 节点数据保存节点名称的属性名称
        //         }
        //     }
        // });
        // js.tree.expandAll(deptTree, false);
        js.modal.open("modal-create-user");
    }

    // /** * 修改用户模态框 */
    // function openEditUserModal(row) {
    //     $("#userForm-edit").fillData(row);
    //
    //     deptTree = js.tree.init({
    //         id: "deptTree-edit",
    //         async: {
    //             url: ctx + "sys/transuser/depts/" + row.id
    //         },
    //         check: {
    //             chkStyle: 'radio',
    //             radioType: "all"
    //         },
    //         data: {
    //             key: {
    //                 name: "name"                                                   // 节点数据保存节点名称的属性名称
    //             }
    //         }
    //     });
    //     js.tree.expandAll(deptTree, false);
    //     js.modal.open("modal-edit-user");
    //     setTimeout(function () {
    //         js.validate.validing("userForm-edit");
    //         deptTree.expandAll(true);
    //     }, 500);
    // }
    /** * 修改用户模态框 */
    function openEditUserModal(row) {
        $("#userForm-edit").fillData(row);
        js.modal.open("modal-edit-user");
        // setTimeout(function () {
        //     js.validate.validing("userForm-edit");
        //     deptTree.expandAll(true);
        // }, 500);
    }
    // function openEditUserModal(row) {
    //     $("#userForm-edit").fillData(row);
    //     js.modal.open("modal-edit-user");
    //     setTimeout(function () {
    //         js.validate.validing("userForm-edit");
    //         deptTree.expandAll(true);
    //     }, 500);
    // }

    $(function () {

        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "sys/transuser/list",
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "帐号", field: 'account'},
                {title: "姓名", field: 'name'},
                // {title: "电话", field: 'tel'},
                // {title: "所属科室", field: 'branchName'},
                // {title: "所属部门", field: 'deptName'},
                {
                    title: "职位", field: 'role',
                    formatter: function (value, row) {
                        if (row.role === 1) {
                            return '生产';
                        } else if (row.role === 2) {
                            return '质检';
                        }
                    }
                },
                {
                    title: "部门", field: 'dept',
                },
                {
                    title: "科室", field: 'branch',
                },
                {
                    title: "状态", field: 'status',
                    formatter: function (value, row) {
                        if (row.status === 1) {
                            return '<span class="badge label-success">正常</span>';
                        } else if (row.status === 0) {
                            return '<span class="badge label-danger">锁定</span>';
                        }
                    }
                },
                {
                    title: "操作",
                    width: '250',
                    formatter: function (value, row) {
                        var actions = [];
                        if (hasP('system:transuser:edit')) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditUserModal(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                            if (row.status === 1) {
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="lockUser(' + row.id + ', 0)"> 锁定</a> ');
                                actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="resetPassword(' + row.id + ')"> 重置密码</a> ');
                            } else {
                                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="lockUser(' + row.id + ', 1)"> 解锁</a> ');
                            }
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /** 创建用户验证规则 */
        js.validate.init("userForm-create", {
            fields: {
                account: {
                    validators: {
                        notEmpty: {message: '请输入帐号'},
                        remote: {
                            url: ctx + "sys/transuser/checkUnique",
                            message: '帐号已存在',
                            delay: 500,
                            type: 'POST',
                            data: {account: $("#account").val()}
                        }
                    }
                },
                name: {validators: {notEmpty: {message: '请输入姓名'}}},
                dept: {validators: {notEmpty: {message: '请输入部门'}}},
                branch: {validators: {notEmpty: {message: '请输入科室'}}}
            }
        });
        /** 创建帐户 */
        $("#btn-create-user").click(function () {
            if (js.validate.isValid("userForm-create")) {
                js.post({
                    url: ctx + "sys/transuser/save",
                    data: $("#userForm-create").serialize(),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-create-user");
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                });
            }
        });
        // $("#btn-create-user").click(function () {
        //     if (js.validate.isValid("userForm-create")) {
        //         js.post({
        //             url: ctx + "sys/transuser/save",
        //             data: $("#userForm-create").serialize() + "&deptId=" + js.tree.getCheckedNodes(deptTree),
        //             success: function (result) {
        //                 if (result.type === web_status.SUCCESS) {
        //                     js.modal.success(result.msg);
        //                     js.table.refresh(table);
        //                     js.modal.hide("modal-create-user");
        //                 } else {
        //                     js.modal.warning(result.msg);
        //                 }
        //             }
        //         });
        //     }
        // });

        /** 隐藏模态框重置创建表单 */
        js.modal.hideEvent("modal-create-user", function () {
            js.validate.reset("userForm-create");
            js.reset("userForm-create");
        });


        /** 修改用户验证规则 */
        js.validate.init("userForm-edit", {
            fields: {
                name: {validators: {notEmpty: {message: '请输入姓名'}}}
            }
        });
        /** 编辑帐户 */
        $("#btn-edit-user").click(function () {
            if (js.validate.isValid("userForm-edit")) {
                js.post({
                    url: ctx + "sys/transuser/edit",
                    data: $("#userForm-edit").serialize(),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-edit-user");
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                });
            }
        });
        // $("#btn-edit-user").click(function () {
        //     if (js.validate.isValid("userForm-edit")) {
        //         js.post({
        //             url: ctx + "sys/transuser/edit",
        //             data: $("#userForm-edit").serialize() + "&deptId=" + js.tree.getCheckedNodes(deptTree),
        //             success: function (result) {
        //                 if (result.type === web_status.SUCCESS) {
        //                     js.modal.success(result.msg);
        //                     js.table.refresh(table);
        //                     js.modal.hide("modal-edit-user");
        //                 } else {
        //                     js.modal.warning(result.msg);
        //                 }
        //             }
        //         });
        //     }
        // });
        /** 隐藏模态框重置修改表单 */
        js.modal.hideEvent("modal-edit-user", function () {
            js.validate.reset("userForm-edit");
            js.reset("userForm-edit");
        });

    });

</script>
</body>
</html>
